媒体查询使用的方法主要涉及到CSS中的@media规则，它允许开发者根据设备的不同特性（如窗口宽度、屏幕比例、设备方向、分辨率等）来应用不同的样式规则。以下是媒体查询使用方法的详细说明：

一、媒体查询的基本结构

媒体查询的基本结构如下：

@media 媒体类型 and (媒体特性) {
    /* CSS样式规则 */
}

• 媒体类型：指定设备类型，如screen（屏幕设备）、print（打印设备）等。常用的媒体类型是screen和all（所有设备类型）。
• 媒体特性：用于描述设备的特定属性，如宽度、高度、方向、分辨率等。常用的媒体特性包括width、height、device-width、device-height、orientation、resolution等。这些特性通常与min-或max-前缀结合使用，以指定最小或最大限制值。

二、媒体查询的写法示例

1. 根据屏幕宽度应用样式：

@media screen and (min-width: 640px) {
    /* 当屏幕宽度大于或等于640px时应用的样式 */
    body {
        background-color: #f0f0f0;
    }
}

2. 结合多个媒体特性：

@media screen and (min-width: 600px) and (max-width: 900px) {
    /* 当屏幕宽度在600px到900px之间时应用的样式 */
    body {
        background-color: #f5f5f5;
    }
}

3. 使用not和only关键字：

   • not关键字用于排除符合特定条件的设备：

   @media not screen and (max-width: 1200px) {
       /* 应用于除屏幕宽度小于或等于1200px之外的所有设备 */
   }
   

   • only关键字用于指定特定的媒体类型，并排除不支持媒体查询的浏览器：

   @media only screen and (min-width: 768px) {
       /* 仅应用于支持媒体查询的屏幕设备，且屏幕宽度大于或等于768px */
   }
   

三、媒体查询的使用方式

媒体查询的使用方式主要有两种：内联式和外联式。

1. 内联式：直接在CSS文件中使用媒体查询。
2. 外联式：将媒体查询作为单独的CSS文件从外部引入。在HTML文件中，通过<link>标签的media属性指定媒体查询条件。

四、注意事项

1. 媒体查询中的每个单词之间需要加一个空格，且判断条件后面不能加分号。
2. 媒体查询建议写在样式表的最下面，以便层叠覆盖掉之前的样式规则。
3. CSS3 Media Queries得到了众多现代浏览器的支持，但在使用时应考虑兼容性问题，特别是针对较旧的浏览器版本。

综上所述，媒体查询是一种强大的工具，允许开发者根据设备的不同特性来灵活地应用不同的样式规则，从而优化网页在不同设备上的显示效果。